<template>
	<view class="route-orderdetail">
		<view class="header">
			<image class="imgcont" src="../../static/images/bg.png" mode=""></image>
			<view class="bar" :style="{top:statusBarHeightRef+'px'}">
				<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
			</view>
		</view>
		<view class="cont" :style="{marginTop:statusBarHeightRef+'px'}">
			<view class="topcont">
				<view class="tit">
					待付款
				</view>

			</view>
			<view class="address">
				<view class="address-itemLeft">
					<u-icon name="map-fill" color="#999" size="18"></u-icon>
				</view>
				<view class="address-itemRight">
					<view class="name">
						张晓峰 187666688
					</view>
					<view class="desc">
						上海市浦东新区银都中路88号上海市浦东新区银都中路88号
					</view>
				</view>
			</view>
			<view class="goods">
				<view class="goods-info">
					<view class="info-item">
						<view class="info-left">

						</view>
						<view class="info-right">
							<view class="name">
								联想（Lenovo）高端笔记本ThinkPad
								X13 i7- 10510u 16GB+512SSD
							</view>
							<view class="desc">
								系统：WIN11 HOME 家庭版
							</view>

							<view class="priceandnum">
								<view class="price">
									<view class="">
										￥
									</view>
									<view class="val">
										1222
									</view>
								</view>
								<view class="num">
									×1
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="jiage">

				<view class="jiage-item">
					<view class="label">
						商品总额
					</view>
					<view class="val">
						<view class="price">
							<view class="">
								￥
							</view>
							<view class="val">
								1222
							</view>
						</view>
					</view>
				</view>
				<view class="jiage-item">
					<view class="label">
						运费
					</view>
					<view class="val">
						<view class="price">
							<view class="">
								￥
							</view>
							<view class="val">
								0.00
							</view>
						</view>
					</view>
				</view>
				<view class="jiage-item">
					<view class="label">
						优惠券优惠
					</view>
					<view class="val">
						<view class="price red">
							<view class="">
								￥
							</view>
							<view class="val ">
								50.00
							</view>
						</view>
					</view>
				</view>
				<view class="jiage-item">
					<view class="label">
						应付款
					</view>
					<view class="val">
						<view class="price red">
							<view class="">
								￥
							</view>
							<view class="val ">
								50.00
							</view>
						</view>
					</view>
				</view>
				<view class="jiage-item boder-t">
					<view class="label">
						实付款
					</view>
					<view class="val">
						<view class="price red">
							<view class="">
								￥
							</view>
							<view class="val big">
								50.00
							</view>
						</view>
					</view>
				</view>

			</view>

			<view class="order-info">
				<view class="item">
					<view class="label">
						订单编号
					</view>
					<view class="val">
						14459632662
					</view>
				</view>
				<view class="item">
					<view class="label">
						创建时间
					</view>
					<view class="val">
						2022-10-22 15:25:32
					</view>
				</view>
				<view class="item">
					<view class="label">
						支付时间
					</view>
					<view class="val">
						2022-10-22 15:25:32
					</view>
				</view>
			</view>

		</view>
		<view class="footer">
			<view class="btncont">
				<view class="cancelbtn commonbtn">
					取消订单
				</view>
				<view class="confirmbtn commonbtn">
					付款
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	const totalHeight = ref(0)
	const statusBarHeightRef = ref(0)

	onLoad(() => {
		//#ifndef H5
		uni.getSystemInfo({
			success: res => {
				let menu = uni.getMenuButtonBoundingClientRect()
				let statusBarHeight = res.statusBarHeight
				let menuHeight = menu.height
				let menuTop = menu.top
				let navigatorHeight = (menu.top - res.statusBarHeight) * 2 + menu.height
				totalHeight.value = statusBarHeight + navigatorHeight
				statusBarHeightRef.value = statusBarHeight

			}
		})
		//#endif

	})
</script>

<style lang="scss" scoped>
	@import 'index.scss'
</style>